<template>
  <xdh-tabs :data="tabsData" type="border-card" style="height:100%" @tab-click="handleTabClick"></xdh-tabs>
</template>

<style type="text/scss" lang="scss">
  .el-tabs {
    &__content, .el-tab-pane {
      height: 100%;
    }
  }
</style>

<script>
  import XdhTabs from '../../widgets/xdh-tabs'
  import ClueList from '../../components/clue-list.vue'
  import clueClueList from '../../base/mixin/clue-clue-list'

  export default {
    mixins: [clueClueList],
    components: {
      ClueList,
      XdhTabs
    },
    data() {
      return {
        tabs: [],
        baseProps: {
          mixin: clueClueList,
          name: 'clueClueList',
          modelDey: 'pkValue',
          handleType: 'icon',
          addable: false,
          editable: false,
          removable: false
        }
      }
    },
    computed: {
      tabsData() {
        let data = [];
        this.tabs.forEach((tab, index) => {
          data.push({
            keepAlive: true,
            label: tab.label,
            component: ClueList,
            props: {
              curdProps: Object.assign({}, this.baseProps, {
                query: {ltId: 1, nodekey: tab.name}
              }),
              tabProps: {
                tabIndex: index,
                type: tab.name
              }
            }
          })
        })
        return data
      }
    },
    created() {
      this.getTabData()
    },
    methods: {
      getTabData() {
        this.getClueNodes().then(res => {
          this.tabs = res
        })
      },
      handleTabClick(tab) {
        console.log('click tab')
      }
    }
  }
</script>
